<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Trang chi tiết</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="public/css/jquery.mCustomScrollbar.min.css"/>
    <!--link rel="stylesheet" href="public/lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"/-->
    <link rel="stylesheet" href="public/css/bootstrap.min.css"/>
    <!--link rel="stylesheet" href="public/lib/bootstrap/dist/css/bootstrap.min.css"/-->
    <link rel="stylesheet" href="public/lib/fontawesome/css/font-awesome.min.css"/>
    
    <link rel="stylesheet" href="public/lib/owlcarousel/owl.carousel.css"/>
    <link rel="stylesheet" href="public/lib/owlcarousel/owl.theme.css"/>
    <link rel="stylesheet" href="public/css/style.css"/>
    
    <!-- Jquery -->
    <script type="text/javascript" src="public/js/jquery.js"></script>
    <script type="text/javascript" src="public/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="public/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" src="public/js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="public/js/plugin.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="public/js/html5shiv.min.js"></script>
        <script src="public/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <header class="header">
        <div class="top-header clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-4">
                        <div class="logo-nav">
                            <h1 class="logo"><a href="#" title="videotv"><img src="public/img/logo.png" alt="videotv"></a></h1>
                            <div class="btn-bar"><i class="fa fa-bars"></i> <i class="fa fa-caret-down"></i></div>
                            <nav class="main-menu menu-nav">
                                <ul>
                                    <li class="active"><a href="#"><i class="fa fa-home"></i> Trang chủ</a></li>
                                    <li><a href="#tvshow"><i class="fa fa-video-camera"></i> TV Show</a></li>
                                    <li><a href="#"><i class="fa fa-film"></i> Phim</a></li>
                                    <li><a href="#"><i class="fa fa-music"></i> Âm nhạc</a></li>
                                    <li><a href="#leaf"><i class="fa fa-leaf"></i> Hoạt hình</a></li>
                                    <li><a href="#game"><i class="fa fa-leaf"></i> Game</a></li>
                                    <li><a href="#sport"><i class="fa fa-futbol-o"></i> Thể thao</a></li>
                                    <li><a href="#news"><i class="fa fa-newspaper-o"></i> Tin tức</a></li>
                                    <li><a href="#funny"><i class="fa fa-trophy"></i> Hài hước</a></li>
                                    <li><a href="#public"><i class="fa fa-google-wallet"></i> Cộng đồng</a></li>
                                        
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-8">
                        <div class="input-group search pull-left">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                        <div class="login-upload pull-right">
                            <button type="button" class="btn btn-default">Tải lên</button>
                            <button type="button" class="btn btn-primary login">Đăng nhập</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu-top clearfix hidden-xs">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <nav class="main-menu">
                            <ul>
                                <li class="active"><a href="#"><i class="fa fa-home"></i> Trang chủ</a></li>
                                <li><a href="#tvshow"><i class="fa fa-video-camera"></i> TV Show</a></li>
                                <li><a href="#"><i class="fa fa-film"></i> Phim</a></li>
                                <li><a href="#"><i class="fa fa-music"></i> Âm nhạc</a></li>
                                <li><a href="#leaf"><i class="fa fa-leaf"></i> Hoạt hình</a></li>
                                <li><a href="#game"><i class="fa fa-leaf"></i> Game</a></li>
                                <li><a href="#sport"><i class="fa fa-futbol-o"></i> Thể thao</a></li>
                                <li><a href="#news"><i class="fa fa-newspaper-o"></i> Tin tức</a></li>
                                <li><a href="#funny"><i class="fa fa-trophy"></i> Hài hước</a></li>
                                <li><a href="#public"><i class="fa fa-google-wallet"></i> Cộng đồng</a></li>
                                    
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <div class="video-player">
                            <iframe width="100%" height="398" src="https://www.youtube.com/embed/RZVyrY2sFL4" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <div class="video-subcribe">
                            <div class="btn-subcribe">
                                <span>Subcribe to Videotv</span>
                                <div class="youtut">
                                    <div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 visible-md-block visible-lg-block">
                        <ul class="video-list" data-mcs-theme="minimal-dark">
                            <li class="active">
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                            <li>
                                <a class="img" href="#"><img class="img-responsive" src="public/img/video-play.jpg" alt=""></a>
                                <div class="text">
                                    <a href="#">This "Fallout vs Skyrim" Fan Battle Is Bloody Awesome</a>
                                    <div class="time">3:15</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                                <div class="post-bar clearfix">
                                    <div class="pull-left">
                                        <a class="badge-upvote-btn btn btn-invert btn-lg"><i class="fa fa-arrow-up"></i></a>
                                        <a class="badge-downvote-btn btn btn-invert btn-lg"><i class="fa fa-arrow-down"></i></a>
                                    </div>
                                    <div class="pull-right">
                                        <a class="btn btn-facebook btn-lg" href="https://www.facebook.com/sharer/sharer.php?u=link" target="_blank"><i class="fa fa-facebook fa-lg"></i>Share<span class="hidden-xs"> on Facebook</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                <div class="video-control">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                            <a class="badge-post-next btn btn-lg btn-invert btn-block" href="#" role="button"><i class="fa fa-arrow-left"></i> Previous</a>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                            <a class="badge-post-prev btn btn-lg btn-invert btn-block" href="#" role="button">Next <i class="fa fa-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <h1 class="detail-title"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, placeat</span><span class="time">01:20</span></h1>
                            <div class="detail-count"><span>29 points</span> - <span>32 comments</span></div>
                            <div class="detail-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolores libero possimus sit temporibus voluptates quibusdam! Rem nostrum inventore doloribus possimus odio provident dolores quae, porro nam, ut eaque mollitia.</div>
                            <div class="detail-view"><strong>21,015</strong> views</div>
                            <div role="tabpanel" class="comment-all">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#comment" aria-controls="comment" role="tab" data-toggle="tab">Videotv Comments <span class="num-comment">26</span></a>
                                    </li>
                                    <li role="presentation"><a href="#comment-fb" aria-controls="comment-fb" role="tab" data-toggle="tab">Facebook Comments</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="comment">
                                        <div class="comment-bar clearfix">
                                            <div class="text pull-left">26 comments</div>
                                            <div class="btn-bar pull-right">
                                                <button class="btn-hot active">Hot</button>
                                                <button class="btn-fresh">Fresh</button>
                                            </div>
                                        </div>
                                        <div class="comment-info">
                                            <div class="comment-area">
                                                <img class="avatar" src="public/img/avatar.jpg" alt="avatar">
                                                <div class="text">
                                                    <textarea class="form-control" rows="2">Write comments...</textarea>
                                                </div>
                                            </div>
                                        </div> 
                                        <div class="comment-info">
                                            <div class="comment-area">
                                                <img class="avatar" src="public/img/avatar.jpg" alt="avatar">
                                                <div class="text">
                                                    <div class="user"><span class="name">Feeling</span><span class="point">5 point</span> . <span class="date">29 dec</span></div>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quas quam earum vitae odio aspernatur.</p>
                                                </div>
                                                <div class="user-reply">
                                                    <span class="reply">Reply</span><span class="up"><i class="fa fa-arrow-up"></i></span><span class="down"><i class="fa fa-arrow-down"></i></span>
                                                </div>
                                            </div>
                                            <div class="comment-info">
                                                <div class="comment-area">
                                                    <img class="avatar" src="public/img/avatar.jpg" alt="avatar">
                                                    <div class="text">
                                                        <div class="user"><span class="name">Feeling</span><span class="point">5 point</span> . <span class="date">29 dec</span></div>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quas quam earum vitae odio aspernatur.</p>
                                                    </div>
                                                    <div class="user-reply">
                                                        <span class="reply">Reply</span><span class="up"><i class="fa fa-arrow-up"></i></span><span class="down"><i class="fa fa-arrow-down"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                        <div class="comment-info">
                                            <div class="comment-area">
                                                <img class="avatar" src="public/img/avatar.jpg" alt="avatar">
                                                <div class="text">
                                                    <div class="user"><span class="name">Feeling</span><span class="point">5 point</span> . <span class="date">29 dec</span></div>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quas quam earum vitae odio aspernatur.</p>
                                                </div>
                                                <div class="user-reply">
                                                    <span class="reply">Reply</span><span class="up"><i class="fa fa-arrow-up"></i></span><span class="down"><i class="fa fa-arrow-down"></i></span>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="comment-fb">
                                        <div class="fb-comments" data-href="http://www.soxdox.com" data-numposts="5" data-colorscheme="light"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
                    <div class="sidebar-right clearfix">
                        <div class="faviour-title">Bạn có thể thích</div>
                        <div class="faviours">
                            <div class="row">
                                <div class="img-title col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                    <a href="#" class="cover" title="Lorem dolor" style="background-image: url(public/img/video-play.jpg)"><img class="img-responsive" src="public/img/video-play.jpg" alt="img"></a>
                                </div>
                                <div class="cocol-xs-7 col-sm-7 col-md-7 col-lg-7">
                                    <a href="#" class="title" title="Lorem dolor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quam.</a>
                                    <div class="clock-view">
                                        <span><i class="fa fa-clock-o"></i> 01:20</span>
                                        <span><i class="fa fa-eye"></i> 158,134</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="faviours">
                            <div class="row">
                                <div class="img-title col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                    <a href="#" class="cover" title="Lorem dolor" style="background-image: url(public/img/video-play.jpg)"><img class="img-responsive" src="public/img/video-play.jpg" alt="img"></a>
                                </div>
                                <div class="cocol-xs-7 col-sm-7 col-md-7 col-lg-7">
                                    <a href="#" class="title" title="Lorem dolor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quam.</a>
                                    <div class="clock-view">
                                        <span><i class="fa fa-clock-o"></i> 01:20</span>
                                        <span><i class="fa fa-eye"></i> 158,134</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="faviours">
                            <div class="row">
                                <div class="img-title col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                    <a href="#" class="cover" title="Lorem dolor" style="background-image: url(public/img/video-play.jpg)"><img class="img-responsive" src="public/img/video-play.jpg" alt="img"></a>
                                </div>
                                <div class="cocol-xs-7 col-sm-7 col-md-7 col-lg-7">
                                    <a href="#" class="title" title="Lorem dolor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quam.</a>
                                    <div class="clock-view">
                                        <span><i class="fa fa-clock-o"></i> 01:20</span>
                                        <span><i class="fa fa-eye"></i> 158,134</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="faviours">
                            <div class="row">
                                <div class="img-title col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                    <a href="#" class="cover" title="Lorem dolor" style="background-image: url(public/img/video-play.jpg)"><img class="img-responsive" src="public/img/video-play.jpg" alt="img"></a>
                                </div>
                                <div class="cocol-xs-7 col-sm-7 col-md-7 col-lg-7">
                                    <a href="#" class="title" title="Lorem dolor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quam.</a>
                                    <div class="clock-view">
                                        <span><i class="fa fa-clock-o"></i> 01:20</span>
                                        <span><i class="fa fa-eye"></i> 158,134</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="faviours">
                            <div class="row">
                                <div class="img-title col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                    <a href="#" class="cover" title="Lorem dolor" style="background-image: url(public/img/video-play.jpg)"><img class="img-responsive" src="public/img/video-play.jpg" alt="img"></a>
                                </div>
                                <div class="cocol-xs-7 col-sm-7 col-md-7 col-lg-7">
                                    <a href="#" class="title" title="Lorem dolor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quam.</a>
                                    <div class="clock-view">
                                        <span><i class="fa fa-clock-o"></i> 01:20</span>
                                        <span><i class="fa fa-eye"></i> 158,134</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="meta">
                        <div class="title-footer">Meta</div>
                        <ul>
                            <li><a href="#">Register</a></li>
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Entries RSS</a></li>
                            <li><a href="#">Wordpress</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="tag-cloud">
                        <div class="title-footer">Tags cloud</div>
                        <a href="#" class="tag-sm">Band</a>
                        <a href="#" class="tag-sm">Delicius</a>
                        <a href="#" class="tag-sm">Fail</a>
                        <a href="#" class="tag-lg">Featured</a>
                        <a href="#" class="tag-sm">Food</a>
                        <a href="#" class="tag-sm">Funy</a>
                        <a href="#" class="tag-lg">Funy</a>
                        <a href="#" class="tag-sm">Funy</a>
                        <a href="#" class="tag-sm">Video</a>
                        <a href="#" class="tag-sm">Funy</a>
                        <a href="#" class="tag-lg">Music</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="social">
                        <div class="title-footer">Stay connected</div>
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i>Google plus</a></li>
                            <li><a href="#"><i class="fa fa-instagram"></i>Instagram</a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin</a></li>
                            <li><a href="#"><i class="fa fa-tumblr"></i>Tumblr</a></li>
                            <li><a href="#"><i class="fa fa-rss"></i>Rss</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="about-footer">
                        <div class="title-footer">About videotv</div>
                        <p>Cras non dolor. Curabitur blandit mollis lacus. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.</p>
                        <p>Nullam cursus lacinia erat. Pellentesque dapibus hendrerit tortor. Cras id dui.</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="copyright">
                        <p>Copyright © 2008 - 2015. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</body>
</html>